<template>
  <div>
    <div class="home-login">
      <div class="logo">
        <img src="@/assets/1.webp" alt="" />
      </div>
      <p>游客</p>
      <router-link to="/login"><button>去登录</button></router-link>
    </div>

    <div>
      <van-grid direction="horizontal" :column-num="3">
        <van-grid-item icon="star-o" text="我的收藏" />
        <van-grid-item icon="wap-home-o" text="我的出租" />
        <van-grid-item icon="clock-o" text="看房记录" />
      </van-grid>
      <van-grid direction="horizontal" :column-num="3">
        <van-grid-item icon="coupon-o" text="成为房主" />
        <van-grid-item icon="user-circle-o" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.home-login {
  display: flex;
  position: relative;
  border: 1px solid orange;
  margin-top: 100px;
  margin-bottom: 50px;
  border-radius: 20px;
}
.logo {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid purple;
  border-radius: 50%;
  top: -50%;
  left: 40%;
  overflow: hidden;
}
.logo img {
  width: 100%;
}
.home-login p {
  margin-top: 100px;
  margin-left: 135px;
}
button {
  display: flex;
  flex: 1;
  margin-top: 60%;
  margin-left: 50%;
  background-color: #20b97a;
  color: #fff;
  border-radius: 10%;
}
</style>